import { TabWidget } from "std-widgets.slint";
import { FourPanel } from "./four.slint";
import { GridBox, Button, Slider,TextEdit,ListView,CheckBox} from "std-widgets.slint";
import { ScrollView } from "std-widgets.slint";
export component WeekBox inherits Rectangle {
    // 外部属性
    in-out property <string> text;
    width: 12.5%;
    border-width: 1px;
    border-color: #f00;
    Text {
        horizontal-alignment: center;
        vertical-alignment: center;
        text: root.text;
    }
}

export component WeekDayDialog inherits Dialog{
    in-out property <bool> dialog_visible;
    width: 300px;
    height: 200px;
    title: "记录工作任务";
    background: red;
    visible: dialog_visible;
    VerticalLayout {
         Rectangle {
             width: 100%;
             Text {
                 horizontal-alignment: center;
                 vertical-alignment: center;
                 width: 100%;
                 height: 24px;
                 text: "请输入任务";
             }
         }
         Rectangle {
         width: 100%;
         height: 24px;
             Button {
                 text: "Close";
                 clicked => {
                     root.dialog_visible = false;
                 }
             }
         }
     }
}

export component WeekDayItem inherits Rectangle {
    callback clicked(string);
    // 外部属性
    in-out property <string> text;
    in-out property <bool> isEdit;
    in-out property <string> editText;
    in-out property <bool> dialog_visible;
    width: 12.5%;
    border-width: 1px;
    border-color: #f00;
    public function setText(text: string) {
        root.editText = text;
    }
    public function getText() -> string {
        return root.editText;
    }
    public function clearFocus() {
        root.isEdit = false;
    }
    VerticalLayout {
        Rectangle {
            width: 100%;
            height: 26px;
            Text {
                horizontal-alignment: center;
                vertical-alignment: center;
                width: 100%;
                height: 24px;
                text: root.text;
            }
        }

        Rectangle {
            border-color: #1658df;
            border-width: 1px;
            ListView {
                for data in [
                    { name:"A" },
                    { name:"B" },
                    { name:"B" },
                    { name:"B" },
                    { name:"B" },
                    { name:"B" },
                    { name:"B" }
                ]: HorizontalLayout {
                    Rectangle {
                        height: 24px;
                        padding: 2px;
                        HorizontalLayout {
                            Rectangle {
                                width: 40px;
                                CheckBox { }
                            }

                            Text {
                                horizontal-alignment: left;
                                vertical-alignment: center;
                                text: data.name;
                                TouchArea {
                                    double-clicked => {
                                        day_dialog.dialog_visible=true;
                                        root.clicked(data.name);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    day_dialog := WeekDayDialog{
        dialog_visible: false;
    }
}

export  component CalenderPanel inherits Rectangle {
    callback clicked(string);
    callback preMonth();
    callback nextMonth();
    in-out property <[[{day: string, color: string}]]> day_items: [];

    VerticalLayout {
        height: 100%;
        width: 100%;
        HorizontalLayout {
            width: 100%;
            height: 24px;
            WeekBox {
                text: "星期一";
            }

            WeekBox {
                text: "星期二";
            }

            WeekBox {
                text: "星期三";
            }

            WeekBox {
                text: "星期四";
            }

            WeekBox {
                text: "星期五";
            }

            WeekBox {
                text: "星期六";
            }

            WeekBox {
                text: "星期天";
            }

            Rectangle {
                width: 12.5%;
                HorizontalLayout {
                    alignment: center;
                    Button {
                        width: 40px;
                        text: "上";
                        clicked => {
                            root.preMonth();
                        }
                    }

                    Button {
                        width: 40px;
                        text: "下";
                        clicked => {
                            root.nextMonth();
                        }
                    }
                }
            }
        }

        for row_array in day_items: id := HorizontalLayout {
            width: 100%;
            for col in row-array: item := WeekDayItem {
                text: col.day;
                clicked => {
                    root.clicked(col.day);
                }
            }
            Rectangle {
                width: 12.5%;
                Button {
                    text: "周报";
                }
            }
        }
    }
}
